<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <panel-group />
    </div>
    <el-divider content-position="left">监听腾讯流量统计分析：
      <el-tag type="success">腾讯点击量(总)：{{pvSumCounts}}</el-tag>
      <el-tag>腾讯已授权(总)：{{userSumCount || '0'}}</el-tag>
      <el-tag type="danger">腾讯寄存回收(总)：{{deposiSumCount  || '0'}}</el-tag>
      
    </el-divider>
    <el-table
      :data="tableData"
      height="300"
      :cell-style="columnStyle"
      border
      style="width: 100%">
      <el-table-column
        prop="clickDate"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pvCounts"
        label="点击量"
        >
      </el-table-column>
      <el-table-column
        prop="userCount"
        label="已授权"
        >
      </el-table-column>
      <el-table-column
        prop="deposiCount"
        label="寄存回收"
        >
      </el-table-column>
      <el-table-column
        prop="myUserCount"
        label="已授权(平台)"
        >
      </el-table-column>
      <el-table-column
        prop="myDeposiCount"
        label="寄存回收(平台)"
        >
      </el-table-column>
      <!-- <el-table-column
        prop="name"
        label="腾讯点击量(总)"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="腾讯已授权(总)"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="腾讯寄存回收(总)"
      >
      </el-table-column> -->
      <!-- <el-table-column
        prop="name"
        label="已授权(平台总)"
        width="110">
      </el-table-column>
      <el-table-column
        prop="name"
        label="寄存回收(平台总)"
        width="130">
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PanelGroup from "./dashboard/PanelGroup";
import { getFlowIndexCount } from "@/api/visits";
export default {
  name: "Dashboard",
  components: {
    PanelGroup,
  },
  data() {
      return {
        pvSumCounts:"0",
        userSumCount:"0",
        deposiSumCount:"0",
        tableData: [],
      }
    },
  computed: {
    ...mapGetters(["roles"]),
  },
  mounted() {
    let that = this;
    setTimeout(function() {
      that.getFlowIndexCountInit();
    }, 500);
    
  },
  methods: {
    getFlowIndexCountInit(){
      getFlowIndexCount().then((res) => {
        this.pvSumCounts = res.pvSumCounts;
        this.deposiSumCount = res.deposiSumCount;
        this.userSumCount = res.userSumCount;
        this.tableData = res.flowIndexDataList;
      });
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 1 || columnIndex == 2 || columnIndex == 3) {  
            return 'background:	#FFF8DC;'
          }else if (columnIndex == 4 || columnIndex == 5) {  
            return 'background:	oldlace;'
          }else if (columnIndex == 6 || columnIndex == 7 || columnIndex == 8) {  
            return 'background:	#a1f2c5;'
          }else if (columnIndex == 0) {  
            return 'background:	#f0f9eb;'
          }
      },
   }

};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 5px 20px 0px 20px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.acea-row {
  ::v-deep.el-avatar--small {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}
.checkTime {
  ::v-deep.el-radio__input {
    display: none;
  }
}
.ivu-pl-8 {
  margin-left: 8px;
  font-size: 14px;
}
.divBox {
  // padding: 0 20px !important;
}
.dashboard-console-visit {
  ::v-deep.el-card__header {
    padding: 14px 20px !important;
  }
  ul {
    li {
      list-style-type: none;
      margin-top: 12px;
    }
  }
}
.ivu-mb {
  margin-bottom: 10px;
}
</style>
